<template>
  <div class="courier-dashboard-container">
    <!-- 顶部欢迎区域 -->
    <el-card class="welcome-card" shadow="hover">
      <div class="welcome-content">
        <div class="welcome-text">
          <h2>欢迎回来，配送员</h2>
          <p>今天是个配送的好日子</p>
        </div>
        <div class="action-buttons">
          <el-button type="primary" @click="$router.push('/availableOrders')">
            <el-icon><List /></el-icon>查看可接订单
          </el-button>
          <el-button @click="$router.push('/myDeliveries')">
            <el-icon><Van /></el-icon>我的配送
          </el-button>
        </div>
      </div>
    </el-card>
    
    <!-- 状态卡片区域 -->
    <div class="stat-cards">
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>今日订单</h3>
            <div class="stat-number">{{ stats.todayOrders }}</div>
            <div class="stat-trend" :class="stats.ordersTrend > 0 ? 'up' : 'down'">
              <el-icon><component :is="stats.ordersTrend > 0 ? 'ArrowUp' : 'ArrowDown'" /></el-icon>
              <span>{{ Math.abs(stats.ordersTrend) }}%</span>
              <span class="trend-period">较昨日</span>
            </div>
          </div>
          <div class="stat-icon document">
            <el-icon><Document /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>今日收入</h3>
            <div class="stat-number">￥{{ stats.todayEarnings.toFixed(2) }}</div>
            <div class="stat-trend" :class="stats.earningsTrend > 0 ? 'up' : 'down'">
              <el-icon><component :is="stats.earningsTrend > 0 ? 'ArrowUp' : 'ArrowDown'" /></el-icon>
              <span>{{ Math.abs(stats.earningsTrend) }}%</span>
              <span class="trend-period">较昨日</span>
            </div>
          </div>
          <div class="stat-icon income">
            <el-icon><Money /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>本月订单</h3>
            <div class="stat-number">{{ stats.monthOrders }}</div>
            <div class="stat-trend" :class="stats.monthOrdersTrend > 0 ? 'up' : 'down'">
              <el-icon><component :is="stats.monthOrdersTrend > 0 ? 'ArrowUp' : 'ArrowDown'" /></el-icon>
              <span>{{ Math.abs(stats.monthOrdersTrend) }}%</span>
              <span class="trend-period">较上月</span>
            </div>
          </div>
          <div class="stat-icon month">
            <el-icon><Calendar /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>评分</h3>
            <div class="stat-number">{{ stats.rating }}</div>
            <div class="rating-stars">
              <el-rate v-model="stats.rating" disabled text-color="#ff9900"></el-rate>
            </div>
          </div>
          <div class="stat-icon rating">
            <el-icon><Star /></el-icon>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 待配送和收入图表 -->
    <div class="main-content">
      <!-- 待配送订单 -->
      <el-card class="active-orders-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>当前配送任务</h3>
            <el-button type="primary" link @click="$router.push('/myDeliveries')">查看全部</el-button>
          </div>
        </template>
        
        <div v-if="activeDeliveries.length > 0" class="active-deliveries">
          <div v-for="(delivery, index) in activeDeliveries" :key="index" class="delivery-item">
            <div class="delivery-status">
              <el-tag :type="getStatusType(delivery.status)" effect="dark">{{ delivery.statusText }}</el-tag>
            </div>
            <div class="delivery-info">
              <div class="delivery-number">{{ delivery.orderNumber }}</div>
              <div class="delivery-address">
                <span class="address-label">收件地址：</span>
                {{ delivery.deliveryAddress }}
              </div>
              <div class="delivery-time">
                <span class="time-label">预计送达：</span>
                {{ delivery.estimatedDeliveryTime }}
              </div>
            </div>
            <div class="delivery-actions">
              <el-button type="primary" size="small" @click="updateDeliveryStatus(delivery)">{{ getActionText(delivery.status) }}</el-button>
              <el-button size="small" @click="viewDeliveryDetail(delivery.id)">详情</el-button>
            </div>
          </div>
        </div>
        
        <div v-else class="empty-placeholder">
          <el-empty description="当前没有配送任务"></el-empty>
          <el-button type="primary" @click="$router.push('/availableOrders')">查看可接订单</el-button>
        </div>
      </el-card>
      
      <!-- 收入图表 -->
      <el-card class="earnings-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>收入统计</h3>
            <el-radio-group v-model="earningsPeriod" size="small">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
            </el-radio-group>
          </div>
        </template>
        
        <div class="earnings-chart" ref="earningsChartRef">
          <!-- 这里会通过ECharts渲染收入图表 -->
          <div v-if="!chartRendered" class="chart-loading">
            <el-skeleton animated :rows="5" />
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 可接订单列表 -->
    <el-card class="available-orders-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <h3>可接订单推荐</h3>
          <el-button type="primary" link @click="$router.push('/availableOrders')">查看更多</el-button>
        </div>
      </template>
      
      <el-table 
        :data="availableOrders" 
        style="width: 100%" 
        v-loading="loading"
        :default-sort="{ prop: 'distance', order: 'ascending' }">
        <el-table-column prop="orderNumber" label="订单号" min-width="120" />
        <el-table-column prop="pickupAddress" label="取件地址" min-width="180" show-overflow-tooltip />
        <el-table-column prop="distance" label="距离" min-width="100" sortable>
          <template #default="scope">
            {{ scope.row.distance }} 公里
          </template>
        </el-table-column>
        <el-table-column prop="reward" label="配送费" min-width="100" sortable>
          <template #default="scope">
            <span class="reward-amount">¥{{ scope.row.reward.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column width="120" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click="acceptOrder(scope.row)">接单</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="empty-placeholder" v-if="availableOrders.length === 0 && !loading">
        <el-empty description="暂无可接订单"></el-empty>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Document, 
  Van, 
  Calendar,
  Money,
  Star,
  List,
  ArrowUp,
  ArrowDown
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const loading = ref(true)
const chartRendered = ref(false)
const earningsPeriod = ref('week')
const earningsChartRef = ref(null)

// 配送员统计数据
const stats = reactive({
  todayOrders: 8,
  ordersTrend: 12.5,
  todayEarnings: 234.50,
  earningsTrend: -3.2,
  monthOrders: 125,
  monthOrdersTrend: 8.7,
  rating: 4.8
})

// 当前配送任务
const activeDeliveries = ref([
  {
    id: 1,
    orderNumber: 'LG202405080042',
    status: 1,
    statusText: '待取件',
    pickupAddress: '北京市朝阳区建国路88号',
    deliveryAddress: '北京市海淀区西二旗大街58号',
    estimatedDeliveryTime: '今日 15:30前'
  },
  {
    id: 2,
    orderNumber: 'LG202405080056',
    status: 2,
    statusText: '配送中',
    pickupAddress: '北京市朝阳区东三环中路39号',
    deliveryAddress: '北京市海淀区清华科技园',
    estimatedDeliveryTime: '今日 16:45前'
  }
])

// 可接订单数据
const availableOrders = ref([
  {
    id: 3,
    orderNumber: 'LG202405080078',
    pickupAddress: '北京市朝阳区光华路5号',
    deliveryAddress: '北京市西城区西长安街88号',
    distance: 3.2,
    reward: 28.00
  },
  {
    id: 4,
    orderNumber: 'LG202405080093',
    pickupAddress: '北京市海淀区中关村南大街5号',
    deliveryAddress: '北京市朝阳区建国门外大街1号',
    distance: 5.8,
    reward: 42.50
  },
  {
    id: 5,
    orderNumber: 'LG202405080102',
    pickupAddress: '北京市西城区阜成门外大街20号',
    deliveryAddress: '北京市朝阳区工体北路13号',
    distance: 4.1,
    reward: 35.00
  }
])

// 获取状态类型
const getStatusType = (status: number) => {
  const typeMap: Record<number, string> = {
    0: 'info',    // 待接单
    1: 'warning', // 待取件
    2: 'danger',  // 配送中
    3: 'success'  // 已完成
  }
  return typeMap[status] || 'info'
}

// 获取操作按钮文本
const getActionText = (status: number) => {
  const textMap: Record<number, string> = {
    1: '确认取件',
    2: '确认送达'
  }
  return textMap[status] || '更新状态'
}

// 查看配送详情
const viewDeliveryDetail = (id: number) => {
  router.push(`/delivery-detail?id=${id}`)
}

// 更新配送状态
const updateDeliveryStatus = (delivery: any) => {
  // 实际应用中，这里应该调用API更新状态
  ElMessage.success(`已更新订单 ${delivery.orderNumber} 的状态`)
}

// 接受订单
const acceptOrder = (order: any) => {
  // 实际应用中，这里应该调用API接受订单
  ElMessage.success(`已接受订单 ${order.orderNumber}`)
}

onMounted(() => {
  // 模拟加载数据
  setTimeout(() => {
    loading.value = false
    chartRendered.value = true
    
    // 实际项目中，这里应该初始化ECharts图表
    // 例如:
    /*
    import * as echarts from 'echarts'
    
    const initEarningsChart = () => {
      const chartDom = earningsChartRef.value
      if (!chartDom) return
      
      const chart = echarts.init(chartDom)
      
      const option = {
        // 图表配置
      }
      
      chart.setOption(option)
    }
    
    initEarningsChart()
    */
  }, 800)
})
</script>

<style scoped>
.courier-dashboard-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 欢迎卡片 */
.welcome-card {
  background: linear-gradient(135deg, #67C23A 0%, #529b2e 100%);
  color: white;
  border: none;
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text h2 {
  margin: 0 0 10px 0;
  font-size: 24px;
}

.welcome-text p {
  margin: 0;
  opacity: 0.8;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

/* 统计卡片 */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-card {
  border-radius: 8px;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-info h3 {
  font-size: 14px;
  color: #909399;
  margin: 0 0 10px 0;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 5px;
}

.stat-trend {
  display: flex;
  align-items: center;
  font-size: 12px;
  gap: 3px;
}

.stat-trend.up {
  color: #67C23A;
}

.stat-trend.down {
  color: #F56C6C;
}

.trend-period {
  color: #909399;
  margin-left: 3px;
}

.rating-stars {
  margin-top: 5px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.document {
  background-color: #409EFF;
}

.stat-icon.income {
  background-color: #F56C6C;
}

.stat-icon.month {
  background-color: #E6A23C;
}

.stat-icon.rating {
  background-color: #67C23A;
}

/* 主要内容区域 */
.main-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 20px;
}

.active-orders-card, .earnings-card {
  min-height: 300px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.empty-placeholder {
  margin: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 当前配送任务 */
.active-deliveries {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.delivery-item {
  display: flex;
  flex-wrap: wrap;
  padding: 16px;
  border-radius: 8px;
  background-color: #f5f7fa;
  align-items: center;
}

.delivery-status {
  margin-right: 16px;
}

.delivery-info {
  flex: 1;
  min-width: 200px;
}

.delivery-number {
  font-weight: 600;
  margin-bottom: 8px;
}

.delivery-address, .delivery-time {
  color: #606266;
  font-size: 14px;
  margin-bottom: 4px;
}

.address-label, .time-label {
  color: #909399;
}

.delivery-actions {
  display: flex;
  gap: 8px;
  margin-left: 16px;
}

/* 收入图表 */
.earnings-chart {
  height: 250px;
}

.chart-loading {
  padding: 20px;
}

/* 可接订单列表 */
.available-orders-card {
  margin-bottom: 20px;
}

.reward-amount {
  color: #F56C6C;
  font-weight: 600;
}

@media (max-width: 768px) {
  .stat-cards, .main-content {
    grid-template-columns: 1fr;
  }
  
  .welcome-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .delivery-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .delivery-status, .delivery-info, .delivery-actions {
    margin: 8px 0;
    width: 100%;
  }
}
</style> 